<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
// import HelloWorld from './components/HelloWorld.vue'
import TimerCard from './components/TimerCard.vue';
import Weather from "./components/Weather.vue";
import TodoList from "./components/TodoList.vue";
import AddTasks from "./components/AddTasks.vue";
import Date from './components/Date.vue';
</script>

<template>
  <div class="h-screen bg-[#e3e3e3] font-serif relative">
    <header class="py-2 px-40 rounded-b-[4rem] rounded bg-white">
      <div>
        <div
          class="inline-block w-12 h-12 mr-5 rounded-full bg-slate-300 text-center text-2xl leading-[3rem]"
        >Q</div>
        <span class="text-2xl">Hi,Qiu</span>
      </div>
    </header>
    <main class="px-40 mt-10 flex flex-1 justify-between ">
      <article class="w-1/2 overflow-hidden mr-10">
        <TimerCard></TimerCard>
      </article>
      <div class="w-[calc(50%_-_2.5rem)] flex item-start justify-between flex-wrap">
        <aside class=" rounded-3xl">
          <Date></Date>
        </aside>
        <aside class=" rounded-3xl bg">
          <Weather></Weather>
        </aside>
        <aside class="bg-white rounded-3xl w-full p-5 mt-10">
          <TodoList></TodoList>
        </aside>
      </div>

    </main>
    <footer class="mb-10 absolute left-0 right-0 bottom-0 px-40 text-3xl text-center">TODO list</footer>
  </div>
</template>

<style>

</style>
